<template>
  <div class="home">
    <button @click="login">登陆</button>
    <button @click="startConference">发起新的会议</button>

    <ConferenceMainView></ConferenceMainView>
  </div>
</template>

<script>
import { ConferenceMainView } from "@tencentcloud/roomkit-web-vue2.7";
import { conference } from "@tencentcloud/roomkit-web-vue2.7";
export default {
  name: "creatRoom",
  data() {
    return {
      //sdkAppId
      sdkAppId: "",
      //用户id,主持人和参会人都需要
      userId: "",
      //房间id
      roomId: "",
      //用户签名，创建房间和进入房间都需要
      userSig: "",
      //sdk密钥
      sdkSecretKey:
        "e6e41c3e117f54b60c4f17a84e4227cb188d7a04b7b8bcf84626373b159d2de5",
    };
  },
  components: {
    ConferenceMainView,
  },
  async created() {
    this.getData();
  },

  methods: {
    //获取url参数
    getData() {
      const hash = window.location.hash;

      // 去除哈希前缀（保留 # 后的所有内容，包括 ?）
      const paramsStr = hash.startsWith("#?")
        ? hash.slice(2) // 若哈希以 #? 开头，如 "#?param=value"，则取 #? 之后的部分
        : hash.slice(1).split("?")[1]; // 若哈希为 "#/path?param=value"，则取 ? 之后的部分

      // 解析参数
      const params = new URLSearchParams(paramsStr);

      //获取url参数sdkAppId、userId、roomId
      const sdkAppId = Number(params.get("sdkAppId"));
      const userId = params.get("userId");
      const roomId = params.get("roomId");
      this.sdkAppId = sdkAppId;
      this.userId = userId;
      this.roomId = roomId;

      //获取加密后的userId签名
      const { userSig } = genTestUserSig({
        sdkAppId: this.sdkAppId, //通过url获取的sdkAppId
        userId: this.userId,
        sdkSecretKey: this.sdkSecretKey, //放入自己的sdkSecretKey
      });

      //获取userSig签名
      this.userSig = userSig;
    },

    //登陆
    login() {
      conference.login({
        // 获取 sdkAppId 可参考文档开通服务部分，https://cloud.tencent.com/document/product/647/104842
        sdkAppId: this.sdkAppId,
        // 用户在您业务中的唯一标示 Id
        userId: this.userId,
        // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
        //作者在index.html中引入了生成userSig的sdk，所以这里直接传入sdkAppId和userId就会自动生成userSig
        userSig: this.userSig,
      });
    },

    //创建房间
    async startConference() {
      //this.roomId为房间号，主持人和参会者都应该是同一个房间号
      await conference.start(this.roomId, {
        //房间名称可自定义
        roomName: "TestRoom",
        isSeatEnabled: false,
        isOpenCamera: false,
        isOpenMicrophone: false,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  height: 100%;
  width: 100%;
  // border: 1px solid red;
}
</style>